import Compatibility from "../_compatibility.mdx";
import Usage from "../_usage.mdx";

# Border Color

## Usage

<Usage />

## Compatibility

<Compatibility
  supported={["border-{n}", "border-[n]"]}
  none={["border-inherit", "border-current"]}
/>

:::note borderOpacity (native only)

For performance reasons, NativeWind renders with the `corePlugin` `borderOpacity` disabled. This plugin allows the border color to dynamically change it's opacity via the `--tw-border-opacity` variable. Instead, the opacity is set as a static value in the `color` property.

If you need to use this feature, you can enable it by adding the following to your `tailwind.config.js` file:

```js title=tailwind.config.js
module.exports = {
  /* ...  */
  corePlugin: {
    borderOpacity: true,
  },
};
```

:::
